import React, { useRef } from "react";
import { RuleTree } from "@alipay/techui-rule-tree";
import type { FormInstance } from "antd";
import { Form, Input, Select, Space } from "antd";

export default function App() {
  const formRef = useRef<FormInstance>();

  return (
    <div>
      <RuleTree<{ scene: string; extra: string }>
        formRef={formRef}
        onChange={(value) => {
          console.log(value);
        }}
        defaultValue={{
          relation: "and",
          children: [
            {
              scene: "",
              extra: "",
            },
            {
              scene: "other",
              extra: "123",
            },
          ],
        }}
      >
        {(field, index, action) => {
          const record = action.getCurrentRowData();
          return (
            <Space>
              <Form.Item
                noStyle
                name={[field.name, "scene"]}
                rules={[{ required: true }]}
              >
                <Select
                  style={{
                    width: 100,
                  }}
                  onChange={(value) => {
                    if (["a", "b"].includes(value)) {
                      action.setCurrentRowData({
                        extra: "",
                      });
                    }
                  }}
                  options={[
                    { label: "场景A", value: "a" },
                    { label: "场景B", value: "b" },
                    { label: "其他", value: "other" },
                  ]}
                />
              </Form.Item>
              {record.scene === "other" && (
                <Form.Item
                  noStyle
                  name={[field.name, "extra"]}
                  rules={[{ required: true }]}
                >
                  <Input />
                </Form.Item>
              )}
            </Space>
          );
        }}
      </RuleTree>
    </div>
  );
}
